<template>
  <div :class="[prefixCls, { fullscreen }]">
    <Upload
      name="file"
      multiple
      @change="handleChange"
      :action="uploadUrl"
      :showUploadList="false"
      :beforeUpload="beforeUpload"
      :data="{
        bucketName: 'graduatev2',
        customFilename: customFilename,
        customArray: customArray,
      }"
      accept=".jpg,.jpeg,.gif,.png,.webp"
      :headers="{
        Token: token,
      }"
    >
      <a-button type="primary" size="small" v-bind="{ ...getButtonProps }">
        {{ t('component.upload.imgUpload') }}
      </a-button>
    </Upload>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import { Upload } from 'ant-design-vue'
import { useDesign } from '/@/hooks/web/useDesign'
import { useGlobSetting } from '/@/hooks/setting'
import { useI18n } from '/@/hooks/web/useI18n'
import { getToken } from '/@/utils/auth'

import { useUserStore } from '/@/store/modules/user'

export default defineComponent({
  name: 'TinymceImageUpload',
  components: { Upload },
  props: {
    fullscreen: {
      type: Boolean,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    kmdm: {
      type: String,
      default: '',
    },
    sjlb: {
      type: String,
      default: '',
    },
    stid: {
      type: String,
      default: '',
    },
  },
  emits: ['uploading', 'done', 'error'],
  setup(props, { emit }) {
    let uploading = false

    const { uploadUrl, imgUrl } = useGlobSetting()
    const { t } = useI18n()
    const { prefixCls } = useDesign('tinymce-img-upload')

    const getButtonProps = computed(() => {
      const { disabled } = props
      return {
        disabled,
      }
    })

    const customArray = computed(() => {
      const { kmdm, sjlb, stid } = props
      return [userInfo.kmYear, kmdm, sjlb, stid]
    })

    const userStore = useUserStore()
    const userInfo: any = computed(() => userStore.getUserInfo)

    function handleChange(info: Recordable) {
      const file = info.file
      const status = file?.status
      const url = file?.response?.url || imgUrl + file?.response?.data
      const name = file?.name

      console.log(imgUrl + file?.response?.data);
      

      if (status === 'uploading') {
        if (!uploading) {
          emit('uploading', name)
          uploading = true
        }
      } else if (status === 'done') {
        emit('done', name, url)
        uploading = false
      } else if (status === 'error') {
        emit('error')
        uploading = false
      }
    }

    let customFilename = ref('')
    function beforeUpload(file: Recordable) {
      console.log(file)
      const { name } = file
      customFilename.value = `${+new Date()}_${name}`
      return true
    }

    return {
      prefixCls,
      handleChange,
      uploadUrl,
      t,
      getButtonProps,
      userInfo,
      token: getToken(),
      beforeUpload,
      customFilename,
      customArray,
    }
  },
})
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-tinymce-img-upload';

.@{prefix-cls} {
  position: absolute;
  top: 4px;
  right: 10px;
  z-index: 20;

  &.fullscreen {
    position: fixed;
    z-index: 10000;
  }
}
</style>
